<template>
  <div style="width: 100%">
    <el-date-picker
      v-model="date"
      :shortcuts="range"
      type="daterange"
      @change="onChange"
      :start-placeholder="lang.t('components.daterange.start')"
      :end-placeholder="lang.t('components.daterange.end')"
      format="DD/MM/YYYY"
      style="width: 100%"
    />
  </div>
</template>
<script>
import { ref } from 'vue'
import app from "@/app"

export default {
  setup(props, { emit }) {
    // 日期
    const date = ref(null)

    // 快捷日期
    const range = app.lang.tm('components.daterange.range').map(item => {
      // 生成时间范围函数
      item.value = () => {
        const time = app.time.startEndUnix(item.unit)
        return [time[0] * 1000, time[1] * 1000]
      }
      return item
    })

    // 更新
    const onChange = () => {
      emit('date', date.value ? app.time.unixArr(date.value) : null)
    }

    return {
      lang: app.lang,
      range,
      date,
      onChange
    }
  }
}
</script>